<template>
  <a-card>
    <div class="ant-card-head-wrapper">
      <div class="ant-card-head-title">
        <span class="title">生活</span>
        <span class="subtitle">数据时间：{{dataDate}}</span>
      </div>
      <div class="ant-card-extra">
        <a-button type="primary" @click="handleType('life')">查看详情<a-icon type="caret-right" /></a-button>
      </div>
    </div>
    <div class="card-content" style="height: 200px;">
      <a-card :bordered="false">
        <a-row class="life">
          <a-col span="12">
            <a-statistic title="喝水" :value="drinkCount" suffix="次" />
          </a-col>
          <a-col span="12">
            <a-statistic title="如厕" :value="toiletCount" suffix="次" />
          </a-col>
        </a-row>
      </a-card>
      <a-row>
        <a-col span="18">
          <div ref="sleepPieChart" :style="{width:'100%',height:'180px'}"></div>
        </a-col>
        <!-- <a-col span="12">
          <div ref="sleepChart" :style="{width:'100%',height:'200px'}"></div>
        </a-col> -->
      </a-row>
    </div>
  </a-card>
</template>
<script>
import { getAction } from '@/api/manage';
export default {
  name: 'life',
  data() {
    return {
      url: {
        drinklist: "health/drink/queryStudentDetail",
        toiletlist: "health/toilet/queryStudentDetail",
        sleeplist: "health/sleep/sleepReport"
      },
      studentId: '',
      dataDate: '',
      nextDate: '',
      pageSize: 5,
      drinkCount: '',
      toiletCount: ''
    }
  },
  props:[],
  components: {},
  filters: {},
  
  computed: {},
  
  created() {
    this.dataDate = this.$skCommon.getDate(0)
    this.nextDate = this.$skCommon.getDate(0)
  },
  
  activated() {
  },

  mounted() {
    // this.load();
  },

  methods: {
    load(dataForm) {
      this.dataDate =  dataForm.dataDate
      this.nextDate =  dataForm.dataDate
      this.studentId = dataForm.studentId
      this.loadSleep();
      this.loadDrinkAndToilet();
    },
    loadSleep() {
      // 查询睡眠时长
      let params = {
        dateType: 'day',
        queryType: 'student',
        queryDate: this.dataDate,
        studentId: this.studentId
      }
      getAction(this.url.sleeplist, params).then((res)=>{
        if(res.success){
          //饼图
          this.detailData = res.result.count[0];
          this.getPieAndLineData(this.detailData);
        } else {
          this.$message.warning(res.message);
        }
      }).catch(()=>{
      })
    },
    loadDrinkAndToilet () {
      let params = {
        dateType: 'day',
        queryType: 'student',
        queryDate: this.dataDate,
        studentId: this.studentId
      }
      // 查询喝水次数
      getAction(this.url.drinklist, params).then((res)=>{
        if(res.success){
          console.log(res.result)
          if(res.result.length > 0) {
            this.drinkCount = res.result[0].count || 0
          }else{
            this.drinkCount = '-'
          }
        } else {
          this.$message.warning(res.message);
        }
      }).catch(()=>{
      })
      // 查询如厕次数
      getAction(this.url.toiletlist, params).then((res)=>{
        if(res.success){
          console.log(res.result)
          if(res.result.length > 0) {
            this.toiletCount = res.result[0].count || 0
          }else{
            this.toiletCount = '-'
          }
        } else {
          this.$message.warning(res.message);
        }
      }).catch(()=>{
      })
    },
    getPieAndLineData(val) {
      let pieData = [
        {
          name: '深睡',
          value: val ? val.deepSleepDuration.toFixed(2) : 0
        },
        {
          name: '浅睡',
          value: val ? val.lightSleepDuration.toFixed(2) : 0
        },
        {
          name: '清醒',
          value: val ? val.wakefulnessDuration.toFixed(2) : 0
        }
      ];
      this.initPieChart(pieData);
    },
    initPieChart(pieData){
      let el = this.$refs.sleepPieChart;
      var myChartSports;
      if(this.$echarts.getInstanceByDom(el)) {
        myChartSports = this.$echarts.getInstanceByDom(el)
      }
      else{
        myChartSports = this.$echarts.init(el)
      }
      var colorList = ['#73DDFF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF', '#58D5FF']
      let option = {
        tooltip: {
          trigger: 'item',
          backgroundColor: 'rgba(0,0,0,0.5)',
          textStyle: {
            // 文字提示样式
            color: '#fff',
            fontSize: '12'
          },
          borderColor: 'transparent',
          formatter: '{b0}: {c0}分钟<br />占比：{d}%'
        },
        legend: {
            // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
            orient: 'vertical',
            // x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
            x: 'right',
            // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
            y: 'center',
            // itemGap设置各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
            // itemGap: 30,
            // itemWidth: 24,   // 设置图例图形的宽
            // itemHeight: 18,  // 设置图例图形的高
            //格式化图例文本
            formatter(name) {
              //找到data中name和文本name值相同的对象
              const val = pieData.find(item => item.name === name)
              return name + ' ' + val.value + '分钟'
            },
            data: ['深睡','浅睡','清醒']
          },
        series: [
          {
            type: 'pie',
            center: ['50%', '50%'],
            radius: ['40%', '60%'],
            clockwise: true,
            avoidLabelOverlap: true,
            itemStyle: {
              normal: {
                color: function(params) {
                  return colorList[params.dataIndex]
                }
              }
            },
            emphasis: {
              scale: true,
              scaleSize: 15
            },
            label: {
              show: true,
              // color: 'inherit',
              position: 'outer',
              formatter: '{b}\n{d}%',
            },
            data: pieData
          }
        ]
      }
      myChartSports.setOption(option)
      window.addEventListener('resize', () => {
        myChartSports.resize()
      })
    },
    handleType(type){
      this.$emit('detail', type)
    },
  }
}
</script>
<style scoped lang="less">

</style>